<template>
    <div class="page-sell">
        <!--在图片上传成功之后 会在页面停留1s 然后跳转到myad页面 在这1s里加一个透明的mask 防止用户重复操作-->
        <div class="mask" v-if="showMask"></div>
        <van-nav-bar
            :title="$t('m.Sell')"
            left-arrow
            @click-left="onClickLeft"
        />

        <van-cell-group>
            <!--photo-->
            <van-field
                disabled
                :label="$t('m.Photo')"
                placeholder=""
                required
                class="photo-title"
            >
            </van-field>
            <div class="upload-box">
                <van-uploader class="upload-item" :after-read="onReadCoverPhoto">
                    <van-icon name="photograph"/>
                    <div class="cover-text">{{$t('m.cover')}}</div>
                    <van-icon v-if="form.coverPhoto" @click="onCoverPhotoCancel" name="close" class="photo-close"/>
                    <img v-if="form.coverPhoto" class="readed-photo" :src="form.coverPhoto" alt="">
                </van-uploader>

                <van-uploader class="upload-item" :after-read="(file)=>{onReadOtherPhoto(file, 1)}">
                    <van-icon name="photograph"/>
                    <van-icon v-if="form.otherPhoto[1]" @click="onOtherPhotoArrDel(1)" name="close"
                              class="photo-close"/>
                    <img v-if="form.otherPhoto[1]" class="readed-photo" :src="form.otherPhoto[1]" alt="">
                </van-uploader>

                <van-uploader class="upload-item" :after-read="(file)=>{onReadOtherPhoto(file, 2)}">
                    <van-icon name="photograph"/>
                    <van-icon v-if="form.otherPhoto[2]" @click="onOtherPhotoArrDel(2)" name="close"
                              class="photo-close"/>
                    <img v-if="form.otherPhoto[2]" class="readed-photo" :src="form.otherPhoto[2]" alt="">
                </van-uploader>

                <van-uploader class="upload-item" :after-read="(file)=>{onReadOtherPhoto(file, 3)}">
                    <van-icon name="photograph"/>
                    <van-icon v-if="form.otherPhoto[3]" @click="onOtherPhotoArrDel(3)" name="close"
                              class="photo-close"/>
                    <img v-if="form.otherPhoto[3]" class="readed-photo" :src="form.otherPhoto[3]" alt="">
                </van-uploader>
            </div>
            <div class="upload-box">
                <van-uploader class="upload-item" :after-read="(file)=>{onReadOtherPhoto(file, 4)}">
                    <van-icon name="photograph"/>
                    <van-icon v-if="form.otherPhoto[4]" @click="onOtherPhotoArrDel(4)" name="close"
                              class="photo-close"/>
                    <img v-if="form.otherPhoto[4]" class="readed-photo" :src="form.otherPhoto[4]" alt="">
                </van-uploader>

                <van-uploader class="upload-item" :after-read="(file)=>{onReadOtherPhoto(file, 5)}">
                    <van-icon name="photograph"/>
                    <van-icon v-if="form.otherPhoto[5]" @click="onOtherPhotoArrDel(5)" name="close"
                              class="photo-close"/>
                    <img v-if="form.otherPhoto[5]" class="readed-photo" :src="form.otherPhoto[5]" alt="">
                </van-uploader>

                <van-uploader class="upload-item" :after-read="(file)=>{onReadOtherPhoto(file, 6)}">
                    <van-icon name="photograph"/>
                    <van-icon v-if="form.otherPhoto[6]" @click="onOtherPhotoArrDel(6)" name="close"
                              class="photo-close"/>
                    <img v-if="form.otherPhoto[6]" class="readed-photo" :src="form.otherPhoto[6]" alt="">
                </van-uploader>

                <van-uploader class="upload-item" :after-read="(file)=>{onReadOtherPhoto(file, 7)}">
                    <van-icon name="photograph"/>
                    <van-icon v-if="form.otherPhoto[7]" @click="onOtherPhotoArrDel(7)" name="close"
                              class="photo-close"/>
                    <img v-if="form.otherPhoto[7]" class="readed-photo" :src="form.otherPhoto[7]" alt="">
                </van-uploader>
            </div>
            <!--category-->
            <van-field
                disabled
                v-model="form.category"
                :label="$t('m.Category')"
                :placeholder="$t('m.Pleaseenter')"
                required
                @click-icon="onSelectCategory"
                @click.native="onSelectCategory"
                :error="validate.category"
            >
                <van-icon slot="icon" name="arrow"></van-icon>
            </van-field>
            <!--title-->
            <van-field
                v-model="form.title"
                type="textarea"
                :label="$t('m.Title')"
                :placeholder="$t('m.Pleaseenter')"
                required
                maxlength="80"
                :error="validate.title"
                v-on:input="onValueChange($event, 'title')"
                class="title-title"
            />
            <!--price-->
            <van-field
                v-if="!(categoryTopId == 349)"
                v-model="form.price"
                type="text"
                :label="$t('m.PriceKyat')"
                :placeholder="$t('m.Pleaseenter')"
                required
                :error="validate.price"
                v-on:input="onValueChange($event, 'price')"
            >
                <van-button slot="button" size="small" type="default" @click="onpriceTypeSelect(form.priceType)">
                    {{priceTypeSelectDone(form.priceType)}}
                </van-button>
            </van-field>
            <!--type-->
            <van-collapse v-model="activeNameOne" v-if="servicesTypeData.length>0"  accordion>
                <van-collapse-item title="Type" name="1">
                    <!-- cleaning(338),aircon(339),electrical lighting wiring(341),Electronics & Gadget Repairs(345),显示为复选-->
                    <van-checkbox-group v-model="typeResult"
                                        v-if="form.categoryid=='338'||
                                        form.categoryid=='339'||
                                        form.categoryid=='341'||
                                        form.categoryid=='345'">
                        <van-checkbox
                            v-for="(item, index) in servicesTypeData"
                            :key="item.id"
                            :name="item.id"
                        >
                            {{ item.text }}
                        </van-checkbox>
                    </van-checkbox-group>
                    <!--home repair（340）,renovation（342），beauty service(347) 显示为单选-->
                    <van-radio-group v-model="typeResult"
                                     v-if="form.categoryid=='340'||
                                     form.categoryid=='342'||
                                     form.categoryid=='347'">
                        <van-radio v-for="item in servicesTypeData" :name="item.id" :key="item.id"> {{ item.text }}
                        </van-radio>
                    </van-radio-group>

                </van-collapse-item>
            </van-collapse>
        </van-cell-group>
        <van-cell-group>
            <!--区域可能用的到 先留着-->
            <!--<van-field-->
            <!--disabled-->
            <!--v-model="form.location"-->
            <!--:label="$t('m.Location')"-->
            <!--:placeholder="$t('m.Pleaseenter')"-->
            <!--required-->
            <!--@click-icon="onSelectRegionTownShip"-->
            <!--@click.native="onSelectRegionTownShip"-->
            <!--:error="validate.location"-->
            <!--&gt;-->
            <!--<van-icon slot="icon" name="arrow"></van-icon>-->
            <!--</van-field>-->
            <van-field
                v-model="form.description"
                type="textarea"
                :label="$t('m.Description')"
                placeholder=""
                maxlength="2000"
            />
        </van-cell-group>
        <div class="sumbit-box">
            <div class="submit-btn" v-if="!goodsId">
                <van-button size="large" class="btn" @click="onSubmit(1)">{{$t('m.Post')}}</van-button>
                <div style="text-align: center; font-size: 18px; line-height: 30px;">{{$t('m.or')}}</div>
                <van-button size="large" @click="onSubmit(2)">{{$t('m.Saveasdraft')}}</van-button>
            </div>
        </div>
        <div class="sumbit-box">
            <div class="submit-btn" v-if="goodsId">
                <div v-if="status == 1">
                    <van-button size="large" class="btn" @click="onSubmit()">{{$t('m.Update')}}</van-button>
                    <div style="text-align: center; font-size: 18px; line-height: 30px;">{{$t('m.or')}}</div>
                    <van-button type="default" size="large" s tyle="margin-bottom: 10px;" @click="onEditStatus(6)">
                        {{$t('m.Deactivate')}}
                    </van-button>
                    <van-button type="default" size="large" style="margin-bottom: 10px;" @click="onEditStatus(3)">
                        {{$t('m.Markassold')}}
                    </van-button>
                    <van-button type="default" size="large" @click="onEditStatus(4)">{{$t('m.Delete')}}</van-button>
                </div>
                <div v-if="status == 2">
                    <van-button size="large" class="btn" @click="onSubmit()">{{$t('m.Update')}}</van-button>
                    <div style="text-align: center; font-size: 18px; line-height: 30px;">{{$t('m.or')}}</div>
                    <van-button type="default" size="large" style="margin-bottom: 10px;" @click="onEditStatus(1)">
                        {{$t('m.Post')}}
                    </van-button>
                    <van-button type="default" size="large" @click="onEditStatus(4)">{{$t('m.Delete')}}</van-button>
                </div>
                <div v-if="status == 6">
                    <van-button size="large" class="btn" @click="onSubmit()">{{$t('m.Update')}}</van-button>
                    <div style="text-align: center; font-size: 18px; line-height: 30px;">{{$t('m.or')}}</div>
                    <van-button type="default" size="large" style="margin-bottom: 10px;" @click="onEditStatus(1)">
                        {{$t('m.Activate')}}
                    </van-button>
                    <van-button type="default" size="large" style="margin-bottom: 10px;" @click="onEditStatus(3)">
                        {{$t('m.Markassold')}}
                    </van-button>
                    <van-button type="default" size="large" @click="onEditStatus(4)">{{$t('m.Delete')}}</van-button>
                </div>
                <div v-if="status == 3">
                    <van-button size="large" class="btn" @click="onSubmit()">{{$t('m.Update')}}</van-button>
                    <div style="text-align: center; font-size: 18px; line-height: 30px;">{{$t('m.or')}}</div>
                    <van-button type="default" size="large" style="margin-bottom: 10px;" @click="onEditStatus(1)">
                        {{$t('m.Activate')}}
                    </van-button>
                    <van-button type="default" size="large" style="margin-bottom: 10px;" @click="onEditStatus(6)">
                        {{$t('m.Deactivate')}}
                    </van-button>
                    <van-button type="default" size="large" @click="onEditStatus(4)">{{$t('m.Delete')}}</van-button>
                </div>
                <div v-if="status == 7">
                    <van-button size="large" class="btn" @click="onSubmit()">{{$t('m.Update')}}</van-button>
                    <div style="text-align: center; font-size: 18px; line-height: 30px;">{{$t('m.or')}}</div>
                    <van-button type="default" size="large" @click="onEditStatus(4)">{{$t('m.Delete')}}</van-button>
                </div>
                <div v-if="status == 8 || status == 5">
                    <van-button type="default" size="large" @click="onEditStatus(4)">{{$t('m.Delete')}}</van-button>
                </div>
            </div>
        </div>
        <!--action-sheet-->
        <van-actionsheet v-model="actionShow" :actions="conditionActions"/>
        <!--category modal-->
        <van-popup class="modal" v-model="categotyShow" position="bottom" :overlay="true">
            <div class="page-category">
                <van-nav-bar
                    :title="$t('m.Category')"
                    left-arrow
                    @click-left="onClickLeftCategoty"
                />
                <van-list>
                    <van-cell v-for="item in categoryJson" :key="item.id" :title="item.name + ''"
                              @click="onSelectCategoryModal(item)"/>
                </van-list>
            </div>
        </van-popup>
        <!--subCategory modal-->
        <van-popup class="modal" v-model="subCategoryShow" position="bottom" :overlay="true">
            <div class="page-sub-category">
                <van-nav-bar
                    title="Sub Category"
                    left-arrow
                    @click-left="onClickSubCategory"
                />

                <van-collapse v-model="activeNames">
                    <van-collapse-item v-for="item in subCategory" :title="item.name" :name="item.id"
                                       :key="item.id" @click.native="onHandleSubCategory(item)">
                        <van-button v-if="item.children.length>0" style="margin: 0 8px 8px 0;" type="default"
                                    size="normal"
                                    v-for="i in item.children" :key="i.id" @click="onHandleThirdLevelCategory(item, i)">
                            {{i.name}}
                        </van-button>
                    </van-collapse-item>
                </van-collapse>

            </div>
        </van-popup>
        <!--地区选择modal-->
        <van-popup v-model="townshipModalShow" position="bottom" :overlay="true">
            <div class="van-hairline--top-bottom van-picker__toolbar">
                <div class="van-picker__cancel" @click="onTownshipCancel">{{$t('m.Cancel')}}</div><!---->
                <div class="van-picker__confirm" @click="onTownshipConfirm">{{$t('m.Confirm')}}</div>
            </div>
            <van-tree-select
                :items="items"
                :main-active-index="mainActiveIndex"
                :active-id="activeId"
                @navclick="onNavClick"
                @itemclick="onItemClick"
            />
        </van-popup>
    </div>
</template>

<script>

    import {sellOnshelf, sellUpload, getGoodsDetail, sellOnEdit, getModelJson} from '../../static/api/zxy_api'

    // 英文json
    import regions from '../../static/json/region'
    import townships from '../../static/json/township'
    import categoryJson from '../../static/json/category'
    import phoneBrand from '../../static/json/phoneBrand'

    // 缅甸文json
    import mm_regions from '../../static/mmJson/region'
    import mm_townships from '../../static/mmJson/township'
    import mm_categoryJson from '../../static/mmJson/category'

    // 缅甸unicode
    import mmu_regions from '../../static/mmUnicodeJson/region'
    import mmu_townships from '../../static/mmUnicodeJson/township'
    import mmu_categoryJson from '../../static/mmUnicodeJson/category'

    import qs from 'qs';
    // Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。
    import EXIF from 'exif-js'

    function setState(store) {
    }

    export default {
        name: 'sellService',
        middleware: ['login'],
        metaInfo: {
            title: 'Sell',
            titleTemplate: '%s',
            meta: [
                {name: 'keywords', content: 'lavas PWA'},
                {name: 'description', content: '基于 Vue 的 PWA 解决方案，帮助开发者快速搭建 PWA 应用，解决接入 PWA 的各种问题'}
            ]
        },
        async asyncData({store, route}) {
            setState(store);
        },
        data() {
            return {
                typeResult: [],
                servicesTypeData: [],
                activeNameOne: ['1'],
                phoneBrand: phoneBrand,
                categoryTopId: '',
                goodsId: '',
                status: '', // ACTIVE((byte)1), DRAFT((byte)2),SOLD((byte)3),DELETED((byte)4),SUSPENDED((byte)5),INACTIVE((byte)6),PENDING((byte)7), REPORTED((byte)8)
                form: {
                    categoryid: '',
                    category: '',
                    title: '',
                    priceType: 1,   // 1: kyat 2: lakh
                    price: '',
                    condition: '',
                    description: '',
                    coverPhoto: '',
                    coverPhotoBlob: '',
                    otherPhoto: [],
                    otherPhotoBlob: [],
                    location: '',
                    regionId: '',
                    townshipId: '',
                },
                conditionRadio: '',
                editPhotoArr: [],
                sequenceArr: [],
                resPhotoArr: [],
                otherForm: {},
                otherPropertyJson: [],
                onSelectOtherPropJson: [],
                onSelectOtherPropId: '',
                // 默认首次进入页面的时候提示文字为红色
                validate: {
                    category: true,
                    title: true,
                    price: true,
                    // condition: true,
                    // location: true,
                },
                actionShow: false,
                townshipModalShow: false,
                // category
                categotyShow: false,
                // categoryJson: categoryJson,
                // subCategory
                subCategoryShow: false,
                activeNames: ['1'],

                // regionJson: regionJson,
                // townshipJson: townshipJson,
                items: [],
                mainActiveIndex: 0,
                activeId: 0,
                commonModalShow: false,
                howToPhotoShow: false,
                showConditionMessage: true,
                showMask: false
            };
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            onSelectCategory() {
                this.$router.push('/category')
                // this.categotyShow = true;
            },
            onSelectCondition() {
                this.actionShow = true;
            },
            onClickRadio() {
                // if(this.form.conditionRadio == 1){
                //     this.form.condition = 'Old';
                // }else if(this.form.conditionRadio == 0){
                //     this.form.condition = 'New';
                // }
                this.form.condition = ' '
                this.validate.condition = false;
                this.showConditionMessage = false;
            },
            onClickAction(item) {
                this.form.condition = item.name,
                    this.actionShow = false;
                this.validate.condition = false;
            },
            onSelectRegionTownShip() {
                this.townshipModalShow = true;
            },
            onReadCoverPhoto(file) {
                console.dir(file)
                let e = file.file;
                let name = file.file.name;
                let that = this;
                this.setImageCompress(e, name, file.content, (imgObj) => {
                    // let imgObj = {
                    //     photoUrl: srcUrl,
                    //     photoBlob: blob,
                    //     name: name,
                    // }
                    that.form.coverPhoto = imgObj.photoUrl;
                    that.form.coverPhotoBlob = imgObj.photoBlob;
                    // console.log(imgObj, '回调拿到的压缩后的img')
                })

            },
            // 主图取消
            onCoverPhotoCancel() {
                this.form.coverPhoto = '';
                this.form.coverPhotoBlob = '';

                this.editPhotoArr.push(0)
                // 数组去重复
                this.editPhotoArr = [...new Set(this.editPhotoArr)]
            },
            // 读取附加图片
            onReadOtherPhoto(file, index) {
                // console.log(file, '读取文件')
                let e = file.file;
                let name = file.file.name;
                let that = this;
                this.setImageCompress(e, name, file.content, (imgObj) => {
                    // let imgObj = {
                    //     photoUrl: srcUrl,
                    //     photoBlob: blob,
                    //     name: name,
                    // }

                    // vue是通过检测get,set才得知数据是否更新的，而对于数组来说，是没有get，set方法的，所以需要我们自己手动触发，需要发送消息通知vue
                    that.$set(this.form.otherPhoto, index, imgObj.photoUrl)

                    // 数组blob (可能为空 上传需要判断剔除)
                    that.form.otherPhotoBlob[index] = imgObj.photoBlob;

                    // console.log(imgObj, '回调拿到的压缩后的img')
                })
            },
            //onOtherPhotoArrDel 额外图片删除
            onOtherPhotoArrDel(index) {
                this.$set(this.form.otherPhoto, index, '')
                if (this.form.otherPhotoBlob[index]) {
                    this.form.otherPhotoBlob[index] = '';
                }
                this.editPhotoArr.push(index)
                // 需要去重复
                this.editPhotoArr = [...new Set(this.editPhotoArr)]
            },
            // 压缩图片
            setImageCompress(e, name, content, callback) {
                let img = new Image()
                let reader = new FileReader()
                let u = navigator.userAgent;
                let Orientation = null
                //异步获取图片对象的方向信息
                EXIF.getData(e, function () {
                    EXIF.getAllTags(this);
                    Orientation = EXIF.getTag(this, 'Orientation')
                })
                //fileReader异步读取文件
                reader.onload = function (e) {
                    //ev是文件读取的事件对象，读取成功后，拿到结果
                    img.src = e.target.result;
                    //等待新建的image对象加载完成
                    img.onload = function () {
                        // 先是对图像尺寸进行处理，图片原始尺寸
                        let originWidth = this.width
                        let originHeight = this.height
                        // 最大尺寸限制
                        let maxWidth = 1000
                        let maxHeight = 1000
                        // 目标尺寸
                        let targetWidth = originWidth
                        let targetHeight = originHeight
                        // 图片尺寸超过1000x1000的限制
                        if (originWidth > maxWidth || originHeight > maxHeight) {
                            if (originWidth / originHeight > maxWidth / maxHeight) {
                                // 更宽，按照宽度限定尺寸
                                targetWidth = maxWidth
                                targetHeight = Math.round(maxWidth * (originHeight / originWidth))
                            } else {
                                targetHeight = maxHeight
                                targetWidth = Math.round(maxHeight * (originWidth / originHeight))
                            }
                        }
                        // canvas对图片进行缩放
                        let canvas = document.createElement('canvas')
                        let context = canvas.getContext('2d')
                        canvas.width = targetWidth
                        canvas.height = targetHeight
                        if (u.match(/iphone/i) || u.match(/MI 8 Lite/i)) {
                            //苹果和小米8拍照后会自动将照片逆时针旋转90度，下面要做的就是根据拍摄角度在canvas上做对应的旋转截取，使得无论从什么角度拍摄，最终显示的都是正的
                            if (Orientation && Orientation != 1) {
                                switch (Orientation) {
                                    //case6 对应的是竖直时拍摄的结果，拿到的图片对象是已经被苹果处理过的逆时针旋转90度的结果，所以这里要顺时针旋转90度纠正过来
                                    case 6:
                                        canvas.width = targetHeight;
                                        canvas.height = targetWidth;
                                        context.rotate(Math.PI / 2);
                                        context.drawImage(this, 0, -targetHeight, targetWidth, targetHeight);
                                        break;
                                    //case3 对应的是顺时针旋转90度拍的，要顺时针旋转180度矫正
                                    case 3:
                                        context.rotate(Math.PI);
                                        context.drawImage(this, -targetWidth, -targetHeight, targetWidth, targetHeight);
                                        break;
                                    //case 8 对应的是旋转180度倒着拍的，要顺时针旋转270度矫正
                                    case 8:
                                        canvas.width = targetHeight;
                                        canvas.height = targetWidth;
                                        context.rotate(3 * Math.PI / 2);
                                        context.drawImage(this, -targetWidth, 0, targetWidth, targetHeight);
                                        break;
                                }
                            }
                            else {
                                //逆时针旋转90度拍的，或者没有定义，不用旋转处理，直接拉取
                                context.drawImage(this, 0, 0, targetWidth, targetHeight)
                            }
                        }
                        else {
                            //不是苹果小米8，直接拉取
                            context.drawImage(this, 0, 0, targetWidth, targetHeight)
                        }
                        // canvas转为blob并上传
                        canvas.toBlob((blob) => {
                            let srcUrl = canvas.toDataURL("image/jpeg", 0.9);
                            let imgObj = {
                                photoUrl: srcUrl,
                                photoBlob: blob,
                                name: name,
                            }
                            callback(imgObj);
                        }, 'image/jpeg', 0.9)
                    }
                }
                //读取图片对象的内容，获得url地址，这个同步的代码，必定先于前面两处异步代码执行
                reader.readAsDataURL(e);
            },
            onNavClick(index) {
                this.mainActiveIndex = index;
            },
            onItemClick(data) {
                this.activeId = data.id;
            },
            modalSubmit() {
                this.townshipModalShow = false;
            },
            onTownshipCancel() {
                this.townshipModalShow = false;
            },
            // 地区选择处理逻辑
            onTownshipConfirm() {
                // 左侧导航无法拿到id 只能拿到递增index 无用  处理方案为必须选择 township
                if (this.activeId == 0) {
                    this.$toast.fail('Please Select TownShip')
                    return;
                } else {
                    for (let j in this.townshipJson) {
                        if (this.townshipJson[j].value == this.activeId) {
                            for (var i in this.regionJson) {
                                if (this.regionJson[i].value == this.townshipJson[j].regionId) {
                                    this.form.location = this.regionJson[i].text;
                                    this.form.regionId = this.regionJson[i].value;
                                }
                            }

                            this.form.townshipId = this.townshipJson[j].value;
                            this.form.location = this.form.location + '/' + this.townshipJson[j].text;
                        }
                    }
                    this.townshipModalShow = false;
                    this.validate.location = false;
                }
            },
            onClickLeftCategoty() {
                this.categotyShow = false;
            },
            onClickSubCategory() {
                this.subCategoryShow = false;
                this.categotyShow = true;
            },
            // 额外属性双向数据绑定部分需求方法
            onOtherFormInset(json) {
                // 首先重置
                this.otherForm = {};

                for (let i = 0; i < json.length; i++) {
                    this.otherForm[json[i].id] = '';
                }
            },
            // 额外属性遍历写入方法
            onOtherProperty(id, values) {
                for (let i = 0; i < this.categoryJson.length; i++) { // 属性层级一
                    if ((id == this.categoryJson[i].id) && this.categoryJson[i].properties) {
                        // 插入other from中
                        this.onOtherFormInset(this.categoryJson[i].properties);
                        this.otherPropertyJson = this.categoryJson[i].properties;
                    } else {
                        if (this.categoryJson[i].children.length > 0) {
                            for (let j = 0; j < this.categoryJson[i].children.length; j++) {  // 属性层级二
                                if ((id == this.categoryJson[i].children[j].id) && this.categoryJson[i].children[j].properties) {
                                    // 在这里进行最顶级id获取
                                    this.categoryTopId = this.categoryJson[i].id || '';   // 主要为了 job serviece 处理

                                    if (id == '142') {
                                        this.otherPropertyJson = [];

                                        // 将brand数据合并到额外属性json，编辑的时候增加将model部分属性合并，联动逻辑在 onSelectOtherPropDone
                                        let arr = [];
                                        arr = arr.concat([], this.categoryJson[i].children[j].properties);
                                        var obj = {
                                            "id": 57,
                                            "name": "Mobile Model",
                                            "values": []
                                        }

                                        if (typeof(values) == 'object' && values.length > 0) {  // 编辑的时候让model属性可以显示出来
                                            for (let i = 0; i < values.length; i++) {
                                                if (values[i].propertyId == '8') {

                                                    this.$toast({
                                                        mask: true,
                                                        message: 'loading...'
                                                    });

                                                    // 请求model数据
                                                    getModelJson(values[i].valueId).then((res) => {
                                                        obj['values'] = res.data;

                                                        this.$toast.clear();
                                                    }).catch((e) => {
                                                        console.log(e)
                                                        this.$toast.clear();
                                                    })

                                                }
                                            }
                                        }

                                        arr.unshift(obj)
                                        arr.unshift(this.phoneBrand.properties);

                                        // 插入other  from中
                                        this.onOtherFormInset(arr);
                                        this.otherPropertyJson = arr;
                                    } else {
                                        // 插入other from中
                                        this.onOtherFormInset(this.categoryJson[i].children[j].properties);
                                        this.otherPropertyJson = this.categoryJson[i].children[j].properties;
                                    }
                                } else {
                                    if (this.categoryJson[i].children[j].children.length > 0) {
                                        for (let k = 0; k < this.categoryJson[i].children[j].children.length; k++) {  // 属性层级三
                                            if ((id == this.categoryJson[i].children[j].children[k].id) && this.categoryJson[i].children[j].children[k].properties) {
                                                // 插入other from中
                                                this.onOtherFormInset(this.categoryJson[i].children[j].children[k].properties);
                                                this.otherPropertyJson = this.categoryJson[i].children[j].children[k].properties;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            },
            onSelectCategoryModal(item) {
                if (!item.children.length > 0) {
                    this.form.categoryid = item.id;
                    this.form.category = item.name;
                    this.categotyShow = false;
                    this.validate.category = false;

                    // 额外属性写入
                    this.onOtherProperty(item.id)
                } else {
                    this.form.categoryid = item.id;
                    this.form.category = item.name;
                    this.categotyShow = false;
                    this.subCategoryShow = true;

                    // 额外属性写入
                    this.onOtherProperty(item.id)
                }
            },
            onHandleSubCategory(item) {
                if (!item.children.length > 0) {
                    this.form.categoryid = item.id;
                    this.form.category = this.form.category + '/' + item.name;
                    this.subCategoryShow = false;
                    this.validate.category = false;
                    // 额外属性写入
                    this.onOtherProperty(item.id)
                }
            },
            onHandleThirdLevelCategory(item, i) {
                // this.$router.push({
                //     path: '/sell',
                //     query: {
                //         id: i.value,
                //         categoryText: i.text,
                //         parentsText: item.text
                //     }
                // })
                this.form.categoryid = i.id;
                this.form.category = this.form.category + '/' + i.name;
                this.subCategoryShow = false;
                this.validate.category = false;
                // 额外属性写入
                this.onOtherProperty(i.id)
            },
            // 检测额外图片是否有有效blob
            checkOtherPhotoBlob(arr) {
                let flag = false;
                if (arr.length > 0) {
                    for (let i = 0; i < arr.length; i++) {
                        if (arr[i]) {
                            flag = true;
                        }
                    }
                    return flag;
                } else {
                    return flag;
                }
            },
            // 表单提交
            onSubmit(status) {

                // 表单校验

                // 首先清空一遍错误信息
                this.validate = {
                    category: false,
                    title: false,
                    price: false,
                    // condition: false,
                    // location: false,
                };

                if (!this.form.categoryid) {
                    this.validate.category = true;
                }
                if (!this.form.title) {
                    this.validate.title = true;
                }
                if (!this.form.price) {
                    this.validate.price = true;
                }
                // if (!this.conditionRadio) {
                //     this.validate.condition = true;
                // }
                // if (!this.form.location) {
                //     this.validate.location = true;
                // }

                // 校验主图是否存在
                if (!this.form.coverPhoto) {
                    this.$toast.fail('Please upload cover photo');
                    return;
                }

                // 检验是否必填项完成
                for (let i in this.validate) {
                    if (this.validate[i]) {
                        this.$toast.fail('Required filed cannot be empty');
                        return;
                    }
                }


                // console.log(formData, '图片上传的数据')

                let data = {
                    categoryId: this.form.categoryid || '',
                    category: this.form.category || '',
                    title: this.form.title || '',
                    priceType: this.form.priceType || '',  // 1: kyat  2: lakh  3：USD
                    price: this.form.price || '',
                    condition: this.conditionRadio || '',
                    regionId: this.form.regionId || '',
                    townshipId: this.form.townshipId || '',
                    desc: this.form.description || '',
                    values: []
                }

                // 翻译 data 输入部分翻译  提交的时候 如果是mm  则一律转为unicode
                // 所有上传编辑部分的字段默认转unicode
                // if (this.$store.state.store.localLang == 'MM') {
                data.title = this.$translateLang(data.title, 'zawgyiTounicode') || '';
                data.desc = this.$translateLang(data.desc, 'zawgyiTounicode') || '';
                // }

                // 额外属性传值
                for (let i in this.otherForm) {

                    let valueId = '';

                    // 通过当前选中的 category 所设置的额外属性的json 来进行判断
                    for (let j = 0; j < this.otherPropertyJson.length; j++) {
                        if (this.otherPropertyJson[j].id == i) {   // 比较属性id
                            if (this.otherPropertyJson[j].values.length > 1) {
                                for (let k = 0; k < this.otherPropertyJson[j].values.length; k++) {
                                    if (this.otherForm[i] == this.otherPropertyJson[j].values[k].text) {
                                        valueId = this.otherPropertyJson[j].values[k].id
                                    }
                                }
                            } else {
                                valueId = this.otherPropertyJson[j].values[0].id
                            }
                        }
                    }

                    // 额外属性 输入部分翻译  提交的时候 如果是mm  则一律转为unicode 最新修改为所有字段统一转unicode

                    if (i == 51) {
                        data.brand = this.$translateLang(this.otherForm[i], 'zawgyiTounicode') || '';
                    }

                    data.values.push({
                        propertyId: i,
                        valueId: valueId,
                        text: this.$translateLang(this.otherForm[i], 'zawgyiTounicode') || ''
                    })

                    // if (this.$store.state.store.localLang == 'MM') {
                    //     // brand 额外处理，方便搜索用
                    //     if (i == 51) {
                    //         data.brand = this.$translateLang(this.otherForm[i], 'zawgyiTounicode') || '';
                    //     }
                    //
                    //     data.values.push({
                    //         propertyId: i,
                    //         valueId: valueId,
                    //         text: this.$translateLang(this.otherForm[i], 'zawgyiTounicode') || ''
                    //     })
                    // } else {
                    //     // brand 额外处理，方便搜索用
                    //     if (i == 51) {
                    //         data.brand = this.otherForm[i] || '';
                    //     }
                    //
                    //     data.values.push({
                    //         propertyId: i,
                    //         valueId: valueId,
                    //         text: this.otherForm[i]
                    //     })
                    // }
                }


                // 如果values为空则删除  否则转义字符串
                if (data.values.length == 0) {
                    delete data.values;
                } else {
                    data.values = JSON.stringify(data.values)
                }

                // console.log(data, '将要上传的数据')

                let config = {
                    'Content-Type': 'multipart/form-data'
                }

                const loading = this.$toast.loading({
                    duration: 0,       // 持续展示 toast
                    forbidClick: true, // 禁用背景点击
                    mask: true,
                    message: ''
                });

                if (this.goodsId) { // 编辑逻辑

                    data.goodsId = this.goodsId;
                    data.status = this.status || ''


                    // 比对图片位置数据 数组取交集
                    let that = this;

                    let positionArr = this.sequenceArr.filter(function (v) {
                        return that.editPhotoArr.indexOf(v) !== -1  // 利用filter方法来遍历是否有相同的元素
                    })

                    // 根据位置获取到原始数据的图片id
                    data.images = [];

                    for (let i = 0; i < this.resPhotoArr.length; i++) {
                        for (let j = 0; j < positionArr.length; j++) {
                            if (this.resPhotoArr[i].sequence == positionArr[j]) {
                                data.images.push(this.resPhotoArr[i].id)
                            }
                        }
                    }

                    data.images = JSON.stringify(data.images)

                    data = qs.stringify(data)

                    sellOnEdit(data, config).then((res) => {
                        if (res.data.errorID == 100004) {
                            loading.clear();
                            this.$toast('Please Login!')
                            this.$router.push('/login-register/loginregister')
                        }

                        if (res.data.errorID == 0) {
                            // 如果表单上传成功之后（获取到goodid）

                            // 图片数据上传准备  一个数组，第一张为主图
                            let formData = new FormData();

                            formData.append('goodsId', res.data.object.id)

                            if (this.form.coverPhotoBlob) {
                                formData.append('Images0', this.form.coverPhotoBlob)
                            }

                            if (this.form.otherPhotoBlob) {
                                // 需要剔除空数据
                                for (let i = 1; i < this.form.otherPhotoBlob.length; i++) {
                                    if (this.form.otherPhotoBlob[i]) {
                                        formData.append(`Images${i}`, this.form.otherPhotoBlob[i])
                                    }
                                }
                            }
                            if (!(this.form.coverPhotoBlob || this.checkOtherPhotoBlob(this.form.otherPhotoBlob))) {  // 图片没有需要上传的blob
                                loading.clear();
                                this.$toast.success('Successful')
                                this.showMask = true
                                setTimeout(() => {
                                    this.showMask = false
                                    this.$router.push('/user/myitems')
                                }, 1000);
                                return;
                            }

                            // 检测当前formData中存了几个键值对，解决只进行删除操作的问题
                            let formDataKeyArr = [];
                            for (let key of formData.keys()) {
                                formDataKeyArr.push(key);
                            }

                            // 如果成功之后 上传图片
                            if (formDataKeyArr.length > 1) {
                                sellUpload(formData).then((res) => {
                                    loading.clear();
                                    if (res.data.errorID == 0) {
                                        this.$toast.clear();
                                        this.$toast.success('Successful')
                                        this.showMask = true
                                        setTimeout(() => {
                                            this.showMask = false
                                            this.$router.push('/user/myitems')
                                        }, 1000);
                                    } else {
                                        this.$toast.clear();
                                        this.$toast.fail('failed');
                                    }
                                }).catch((e) => {
                                    this.$toast.clear();
                                    // console.log(e)
                                })
                            }

                        } else {
                            this.$toast.clear();
                            this.$toast.fail('failed');
                            return;
                        }

                    }).catch((e) => {
                        loading.clear();
                        this.$toast.clear();
                        // console.log(e)
                    })
                } else {
                    // 新增的时候
                    data.status = status; // 上传状态
                    data = qs.stringify(data)
                    sellOnshelf(data, config).then((res) => {
                        if (res.data.errorID == 100004) {
                            loading.clear();
                            this.$toast('Please Login!')
                            this.$router.push('/login-register/loginregister')
                        }

                        if (res.data.errorID == 0) {
                            // 如果表单上传成功之后（获取到goodid）

                            // 图片数据上传准备  一个数组，第一张为主图
                            let formData = new FormData();

                            formData.append('goodsId', res.data.object.id)
                            formData.append('Images0', this.form.coverPhotoBlob)

                            // 需要剔除空数据
                            for (let i = 1; i < this.form.otherPhotoBlob.length; i++) {
                                if (this.form.otherPhotoBlob[i]) {
                                    formData.append(`Images${i}`, this.form.otherPhotoBlob[i])
                                }
                            }

                            // 如果成功之后 上传图片
                            sellUpload(formData).then((res) => {
                                loading.clear();
                                if (res.data.errorID == 0) {
                                    this.$toast.clear();
                                    this.$toast.success('Successful')
                                    this.showMask = true
                                    setTimeout(() => {
                                        this.showMask = false
                                        this.$router.push('/user/myitems')
                                    }, 1000);
                                } else {
                                    this.$toast.clear();
                                    this.$toast.fail('failed');
                                }
                            }).catch((e) => {
                                this.$toast.clear();
                                // console.log(e)
                            })

                        } else {
                            this.$toast.clear();
                            this.$toast.fail('failed');
                            return;
                        }

                    }).catch((e) => {
                        loading.clear();
                        this.$toast.clear();
                        // console.log(e)
                    })
                }

            },
            onValueChange(e, item) {
                if (this.form[item] == '') {
                    this.validate[item] = true
                } else {
                    this.validate[item] = false
                }

                if (item == 'price') {
                    if (this.form.price.length == 1) {
                        this.form.price = this.form.price.replace(/[^1-9]/g, '')
                    } else {
                        this.form.price = this.form.price.replace(/\D/g, '')
                        if (this.form.price > 9999999999) {
                            this.form.price = 9999999999;
                        }
                    }
                }

            },
            // 额外属性选择具体类型方法
            onSelectOtherProp(arr, id) {
                // 第一步 打开一个公共modal
                this.commonModalShow = true;
                this.onSelectOtherPropJson = []; // 数据重置为初始化，保证数据不混乱

                // 装载数据（一个数组）
                this.onSelectOtherPropJson = arr;
                this.onSelectOtherPropId = id;
            },
            // 额外属性选择完成
            onSelectOtherPropDone(item) {
                this.commonModalShow = false;
                this.onSelectOtherPropJson = [];

                this.otherForm[this.onSelectOtherPropId] = item.text;

                if (this.onSelectOtherPropId == '8') {
                    for (let i = 0; i < this.otherPropertyJson.length; i++) {
                        if (this.otherPropertyJson[i].id == '57') {
                            this.otherPropertyJson[i].values = [];

                            this.$toast({
                                mask: true,
                                message: 'loading...'
                            });
                            // 请求model数据
                            getModelJson(item.id).then((res) => {
                                this.otherPropertyJson[i].values = res.data;
                                this.$toast.clear();
                            }).catch((e) => {
                                console.log(e)
                                this.$toast.clear();
                            })

                            // 清空之前的选项
                            this.otherForm['57'] = '';
                        }
                    }
                }

                this.onSelectOtherPropId = '';
            },
            // 获取商品编辑详情数据
            onGetDetail(id) {
                getGoodsDetail(id).then((res) => {

                    // 首先清空一遍错误信息
                    this.validate = {
                        category: false,
                        title: false,
                        price: false,
                        condition: false,
                        location: false,
                    };

                    let data = res.data.object;

                    this.status = data.status;  // 当前广告的状态

                    this.form.categoryid = data.categoryId || '';

                    this.form.category = data.category.categoryName || '';

                    // 图片处理
                    this.resPhotoArr = data.images;
                    for (let i = 0; i < data.images.length; i++) {
                        // 当前图片的位置信息
                        this.sequenceArr.push(data.images[i].sequence);

                        if (data.images[i].sequence == 0) {
                            this.form.coverPhoto = data.images[i].url;
                            // this.form.coverPhotoBlob = data.images[i].url;
                        } else {
                            this.form.otherPhoto[data.images[i].sequence] = (data.images[i].url)
                            // this.form.otherPhotoBlob[data.images[i].sequence] = (data.images[i].url)
                        }
                    }

                    // 价格 需要用判断 pricetype
                    this.form.priceType = data.priceType;
                    this.form.price = data.price;

                    // 视图更新radio
                    this.conditionRadio = data.condition + '';
                    // 编辑时 不显示condition栏的please choose提示
                    if (this.conditionRadio) {
                        this.showConditionMessage = false
                    }
                    this.form.condition = ' '; // 清除dom上的placeholder

                    this.onOtherProperty(data.categoryId, data.values)

                    // 地址
                    for (let i = 0; i < this.regionJson.length; i++) {
                        if (data.regionId == this.regionJson[i].value) {
                            this.form.location = this.regionJson[i].text;
                        }
                    }
                    for (let i = 0; i < this.townshipJson.length; i++) {
                        if (data.townshipId == this.townshipJson[i].value) {
                            this.form.location += '/' + this.townshipJson[i].text;
                        }
                    }
                    this.form.regionId = data.regionId
                    this.form.townshipId = data.townshipId

                    // 详情涉及输入提交的字段一律从服务器拿回来转为 zawgyi
                    this.form.title = this.$translateLang(data.title, 'unicodeTozawgyi') || '';
                    // 额外属性编辑逻辑
                    for (let i = 0; i < data.values.length; i++) {
                        this.otherForm[data.values[i].propertyId] = this.$translateLang(data.values[i].text, 'unicodeTozawgyi') || '';
                    }
                    this.form.description = this.$translateLang(data.desc, 'unicodeTozawgyi') || '';

                    // if (this.$store.state.store.localLang == 'MM') {
                    //     this.form.title = this.$translateLang(data.title, 'unicodeTozawgyi') || '';
                    //     // 额外属性编辑逻辑
                    //     for (let i = 0; i < data.values.length; i++) {
                    //         this.otherForm[data.values[i].propertyId] = this.$translateLang(data.values[i].text, 'unicodeTozawgyi') || '';
                    //     }
                    //     this.form.description = this.$translateLang(data.desc, 'unicodeTozawgyi') || '';
                    // } else {
                    //     this.form.title = data.title;
                    //     // 额外属性编辑逻辑
                    //     for (let i = 0; i < data.values.length; i++) {
                    //         this.otherForm[data.values[i].propertyId] = data.values[i].text
                    //     }
                    //     this.form.description = data.desc;
                    // }

                }).catch((e) => {
                    console.log(e)
                })
            },
            // 修改商品状态
            onEditStatus(status) {

                let data = {
                    goodsId: this.goodsId,
                    status: status
                }

                data = qs.stringify(data)

                let config = {
                    'Content-Type': 'multipart/form-data'
                }

                // 首先判断删除的操作
                if (status == 4) {
                    this.$dialog.confirm({
                        title: 'Delete?',
                        message: ''
                    }).then(() => {
                        // on confirm
                        this.$toast({
                            mask: true,
                            message: 'loading...'
                        });

                        sellOnEdit(data, config).then((res) => {

                            if (res.data.errorID == 100004) {
                                this.$toast('Please Login!')
                                this.$router.push('/login-register/loginregister')
                            }

                            if (res.data.errorID == 0) {
                                // 如果表单上传成功之后（获取到goodid）
                                this.$toast.clear();
                                this.$toast.success('Successful')
                                this.$router.push('/user/myitems')
                            } else {
                                this.$toast.clear();
                                this.$toast.fail('failed');
                                return;
                            }

                        }).catch((e) => {
                            this.$toast.clear();
                        })
                    }).catch(() => {
                        return;
                    });
                } else {
                    this.$toast({
                        mask: true,
                        message: 'loading...'
                    });

                    sellOnEdit(data, config).then((res) => {

                        if (res.data.errorID == 100004) {
                            this.$toast('Please Login!')
                            this.$router.push('/login-register/loginregister')
                        }

                        if (res.data.errorID == 0) {
                            // 如果表单上传成功之后（获取到goodid）
                            this.$toast.clear();
                            this.$toast.success('Successful')
                            this.$router.push('/user/myitems')
                        } else {
                            this.$toast.clear();
                            this.$toast.fail('failed');
                            return;
                        }

                    }).catch((e) => {
                        this.$toast.clear();
                    })
                }


            },
            onClickHowPhoto() {
                this.howToPhotoShow = false;
            },
            onpriceTypeSelect(priceType) {
                switch (priceType) {
                    case 1:
                        this.form.priceType = 2;
                        break;
                    case 2:
                        this.form.priceType = 3;
                        break;
                    case 3:
                        this.form.priceType = 1;
                        break;
                }
            },
            priceTypeSelectDone(priceType) {
                switch (priceType) {
                    case 1:
                        return this.$t('m.Kyat') + ' >';
                    case 2:
                        return this.$t('m.Lakh') + ' >';
                    case 3:
                        return "USD" + ' >';
                }
            }
        }
        ,
        computed: {
            subCategory() {
                // 设置当前子json  第二级 手风琴dom
                for (let i = 0; i < this.categoryJson.length; i++) {
                    if (this.form.categoryid == this.categoryJson[i].id) {
                        return this.categoryJson[i].children || [];
                    }
                }
            }
            ,
            conditionActions() {
                return [
                    {
                        name: 'New',
                        callback: this.onClickAction
                    },
                    {
                        name: 'Used',
                        callback: this.onClickAction
                    }
                ]
            }
            ,
            regionJson() {
                if (this.$store.state.store.localLang == 'MM') {
                    return mm_regions
                } else if (this.$store.state.store.localLang == 'MMU') {
                    return mmu_regions
                } else {
                    return regions
                }
            }
            ,
            townshipJson() {
                if (this.$store.state.store.localLang == 'MM') {
                    return mm_townships
                } else if (this.$store.state.store.localLang == 'MMU') {
                    return mmu_townships
                } else {
                    return townships
                }
            }
            ,
            categoryJson() {
                if (this.$store.state.store.localLang == 'MM') {
                    return mm_categoryJson
                } else if (this.$store.state.store.localLang == 'MMU') {
                    return mmu_categoryJson
                } else {
                    return categoryJson
                }
            }
            ,
        }
        ,
        mounted() {
            //判断浏览器是否兼容toBlob方法 如果不兼容就在canvas元素的原型上定义toBlob方法
            if (!HTMLCanvasElement.prototype.toBlob) {
                Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
                    value: function (callback, type, quality) {
                        let binStr = atob(this.toDataURL(type, quality).split(',')[1]),
                            len = binStr.length,
                            arr = new Uint8Array(len);
                        for (let i = 0; i < len; i++) {
                            arr[i] = binStr.charCodeAt(i);
                        }
                        callback(new Blob([arr], {type: type || 'image/png'}));
                    }
                });
            }
            // sotre 作为全局的状态管理 慎重修改
            // 取值方式
            // console.log(this.$store.state.store.localLang, 'localLang')
            // this.$store.commit('store/updateLang', 'US')
            // console.log(this.$store.state.store.localLang, 'localLang')

            // 导入地区选择的json

            let regionArr = [];

            for (let i = 0; i < this.regionJson.length; i++) {
                let townshipArr = [];
                for (let j = 0; j < this.townshipJson.length; j++) {
                    if (this.regionJson[i].value == this.townshipJson[j].regionId) {
                        townshipArr.push({
                            text: this.townshipJson[j].text,
                            id: this.townshipJson[j].value,
                        })
                    }
                }
                regionArr.push({
                    id: this.regionJson[i].value,
                    text: this.regionJson[i].text,
                    children: townshipArr,
                })
            }

            // console.log(regionArr)

            this.items = regionArr;

            window.scroll(0, 0)

            // 如果是编辑的url则启动编辑逻辑
            if (this.$route.query.goodsId) {
                this.onGetDetail(this.$route.query.goodsId);  // 获取详情数据
                this.goodsId = this.$route.query.goodsId;
            }
            // 通过查询字符串设置category
            if (this.$route.query.id) {
                this.form.categoryid = this.$route.query.id || '';
                if (this.$route.query.categoryText) {
                    this.form.category = this.$route.query.categoryText;
                }
                if (this.$route.query.values.length > 0) {
                    this.servicesTypeData = this.$route.query.values
                }
                this.onOtherProperty(this.$route.query.id)
            }
        }
        ,
        beforeRouteLeave(to, from, next) {
            if (to.path == '/category' || to.path == '/sub-category') {
                from.meta['needFresh'] = false;
            } else {
                from.meta['needFresh'] = true;
            }

            // 返回按钮执行之后  如果modal存在 则不会退
            if (this.townshipModalShow) {
                this.townshipModalShow = false;
                next(false);
            } else if (this.commonModalShow) {
                this.commonModalShow = false;
                next(false);
            } else {
                next();
            }
        }
        ,
        beforeRouteEnter(to, from, next) { //路由导航钩子，通过页面路由标记是否需要清空页面数据重新加载
            if (from.path == '/myitems-detail') {
                to.meta['needFresh'] = true;
            }

            next(vm => {
                // 通过 `vm` 访问组件实例
                if (from.path == '/category' || from.path == '/sub-category') {
                    // 通过查询字符串设置category
                    if (vm.$route.query.id) {

                        vm.form.categoryid = vm.$route.query.id || '';

                        if (vm.$route.query.categoryText) {
                            vm.form.category = vm.$route.query.categoryText;
                        }

                        vm.onOtherProperty(vm.$route.query.id)
                    }
                }
            });
        },
        activated() {  //此方法在页面缓存时会被调用，根据路由元信息决定是否重新加载数据。不加载则是上次填写完的数据
            if (this.$route.meta['needFresh']) {  // 当前是否需要刷新
                // this.$data = this.$options.data();  // 整个页面数据重置  报警告
                Object.assign(this.$data, this.$options.data())  // 整个页面数据重置

                // 将mounted钩子函数中执行的操作再执行一遍

                // 导入地区选择的json
                let regionArr = [];
                for (let i = 0; i < this.regionJson.length; i++) {
                    let townshipArr = [];
                    for (let j = 0; j < this.townshipJson.length; j++) {
                        if (this.regionJson[i].value == this.townshipJson[j].regionId) {
                            townshipArr.push({
                                text: this.townshipJson[j].text,
                                id: this.townshipJson[j].value,
                            })
                        }
                    }
                    regionArr.push({
                        id: this.regionJson[i].value,
                        text: this.regionJson[i].text,
                        children: townshipArr,
                    })
                }
                this.items = regionArr;

                // 如果是编辑的url则启动编辑逻辑
                if (this.$route.query.goodsId) {
                    this.onGetDetail(this.$route.query.goodsId);  // 获取详情数据
                    this.goodsId = this.$route.query.goodsId;
                }

                // 通过查询字符串设置 category
                if (this.$route.query.id) {

                    this.form.categoryid = this.$route.query.id || '';

                    if (this.$route.query.categoryText) {
                        this.form.category = this.$route.query.categoryText;
                    }

                    this.onOtherProperty(this.$route.query.id)
                }

            }
        }
    }
    ;
</script>

<style>
    /*css reset 设置了input的line-height默认值为1.15 造成干扰*/
    .page-sell input {
        line-height: unset;
    }

    .van-uploader {
        /*position: unset!important;*/
        /*display: block!important;*/
    }
</style>
<style scoped>
    .line-box {
        height: 70px;
    }

    .margin-top-10 {
        height: 10px;
        background: #f2f2f2;
    }

    .upload-box {
        padding: 0 15px;
        height: 82px;
        margin: 10px 0;
        display: flex;
        justify-content: space-between;
    }

    .upload-item {
        min-width: 80px;
        min-height: 80px;
        border: 1px solid #ededed;
        text-align: center;
    }

    .cover-text {
        position: absolute;
        top: -20px;
        left: -10px;
        right: 0;
        margin: 0 auto;
        z-index: 300;
        color: #000;
        width: 100px;
    }

    .readed-photo {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 200;
        width: 80px;
        height: 80px;
    }

    .photo-close {
        position: absolute;
        right: 10px;
        top: 4px;
        z-index: 300;
        width: 8px;
        height: 8px;
    }

    .modal {
        width: 100%;
        height: 100%;
        overflow: scroll;
    }

    .submit-btn {
        width: 90%;
        padding: 30px 0 40px 0;
        margin: 0 auto;
    }

    .submit-btn .btn {
        border-radius: 5px;
        border: 1px solid #FF9A03;
        color: #fff;
        background: #ff9a03;
    }

    .sumbit-box {
        background: #f2f2f2;
    }

    .word-break {
        margin-right: 5px;
        word-wrap: break-word;
    }

    .photo-title:after {
        box-sizing: border-box !important;
        border: none !important;
    }

    .title-title {
        border-top: 1px solid #e5e5e5 !important;
    }

    .photo-wrap {
        padding: 10px 15px;
    }

    .message {
        font-size: 14px;
        line-height: 1.5;
    }

    .item-wrap {
        display: flex;
        flex-direction: inherit;
        justify-content: space-around;
    }

    .title {
        margin-bottom: 8px;
    }

    .pto:after {

    }
</style>
<style>
    .page-sell {
        position: relative !important;
    }

    .page-sell .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: transparent;
        z-index: 100000;
    }

    .page-sell .van-field .van-cell__title {
        max-width: 80px !important;
    }

    .page-sell .van-field__control {
        text-align: left;
        margin-right: -26px;
    }

    .page-sell .van-icon-photograph {
        font-size: 28px;
        line-height: 80px !important;
    }

    .page-sell .van-field__control:disabled {
        opacity: 1;
        color: initial !important;
        background-color: transparent;
    }

    .van-field__error-message {
        text-align: right !important;
        font-size: 14px !important;
    }

    .condition-modify {
        padding-bottom: 0 ! important;
    }

    .condition-modify.van-cell:not(:last-child):after {
        border: none !important;
    }

    .condition-modify .van-field__body {
        flex-direction: row-reverse !important;
    }

    .condition-message {
        padding: 0px 15px 10px 15px;
        text-align: right;
        color: #f44;
        font-size: 14px;
    }

</style>
